<template>
  <div class="bg">
    <FloatingIcon />
    <Tabs v-model:active="active" style="font-size: 28px" class="fixed-tabs" color="black" line-width="60px">
      <Tab title="待完成" title-style="font-size: 18px">
        <finish />
      </Tab>
      <Tab title="待发布" title-style="font-size: 18px">
        <publish />
      </Tab>
      <Tab title="已发布" title-style="font-size: 18px">
        <AllComponents />
      </Tab>
<!--      <Tab title="新增" title-style="font-size: 18px">-->
<!--        <Add />-->
<!--      </Tab>-->
    </Tabs>
  </div>
</template>

<script setup>
import {CellGroup, Divider, Field, Tab, Tabbar, TabbarItem, Tabs} from "vant";
const router = useRouter();
import {ref} from "vue";
import {useRouter} from "vue-router";
import AllComponents from "@/components/add/AllComponents.vue";
import publish from '@/components/add/publish.vue'
import Finish from "@/components/add/finish.vue";
import FloatingIcon from '@/components/add/FloatingIcon.vue';
const active = ref(0);

</script>

<style scoped>
.bg{
  background-color: #d3e8d3;
  //background-color: #c2d7d0;
  height: 610px;
  width: 100%;
}
</style>
